<template>
  <div class="app-container calendar-list-container">
    <!-- 搜索工具栏 -->
    <section>
      <so-tool-bar :toolData="toolData" :query="listQuery" @search="search"/>
    </section>
    <!-- 其他操作 -->
    <section class="filter-container">
      <el-row>
        <el-col :span="6">
          <el-button class="filter-item" type="primary" size="small" @click="upAndownPro(1)">上架</el-button>
          <el-button class="filter-item" type="primary" size="small" @click="upAndownPro(0)">下架</el-button>
          <el-button class="filter-item" type="primary" size="small" @click="topStatus(1)">置顶</el-button>
          <el-button class="filter-item" type="primary" size="small" @click="topStatus(0)">取消置顶</el-button>
        </el-col>
        <el-col :span="6" style="padding-top: 5px;">
          &nbsp;&nbsp;
          <span class="el-green">共计&nbsp;<em>{{listQuery.total}}</em>&nbsp;个</span>
          &nbsp;&nbsp;
          <span class="el-green">进行中&nbsp;<em>{{inhand_count}}</em>&nbsp;个</span>
        </el-col>
        <el-col :span="12">
          <section style="float: right">
            <el-button class="filter-item" type="danger" size="small" @click="delRows">批量删除</el-button>
            <el-button class="filter-item" type="primary" size="small" @click="createForm">创建抽奖</el-button>
          </section>
        </el-col>
      </el-row>
    </section>
    <el-table :data="tableList" v-loading="loading" element-loading-text="正在查询中。。。" 
      stripe highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column align="center" label="活动ID" prop="id" width="80">
      </el-table-column>
      <el-table-column align="center" width="30">
        <template slot-scope="scope">
          <i class="iconfont ali-zhiding" v-show="scope.row.top_status == 1"></i>
        </template>
      </el-table-column>
      <el-table-column align="center" label="活动名称" prop="active_title" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" label="创建时间" prop="create_time" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" label="活动时间" width="150px" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.active_starttime}}</span><br/>
          <span>{{scope.row.active_endtime}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="参与人数" prop="">
      </el-table-column> -->
      <!-- <el-table-column align="center" label="奖品数/已中奖" prop="">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="这个功能按钮临时放置的，后期会改成真是的数据展示" placement="top">
            <el-button type="text" size="mini" @click="listForm(scope.row)">列表</el-button>
          </el-tooltip>
        </template>
      </el-table-column>  -->
      <!-- <el-table-column align="center" label="浏览量" prop="">
      </el-table-column>      -->
      <el-table-column align="center" label="状态">
        <template slot-scope="scope">
          <el-tag size="mini" type="success">{{t_status[scope.row.close_status]}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="列表链接">
        <template slot-scope="scope">
          <el-button
            v-clipboard:copy="'https://cloud.anyolife.com/LuckyDraw'"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
            type="text"
          >复制链接</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="详情链接">
        <template slot-scope="scope">
          <el-button
            v-clipboard:copy="'https://cloud.anyolife.com/Trunplate1' + '?drawId=' + scope.row.id"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
            type="text"
          >复制链接</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <i class="iconfont ali-edit-2" @click="editForm(scope.row)"></i>
          <i class="iconfont ali-bin" @click="delRow(scope.row)"></i>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <section>
      <so-pagination :query="listQuery" @initList="initList"/>
    </section>
  </div>
</template>

<script>
import { draw_list, draw_updateCloseStatus, draw_updateTopStatus, draw_delete, draw_deleteAll } from '@/api/draw'
import { searchTool } from '@/utils'
import SoPagination from '@/components/SoPagination'
import SoToolBar from '@/components/SoToolBar'
import { toolData } from './draw'

export default {
  name: 'draw',
  components: { SoPagination, SoToolBar },
  data() {
    return {
      toolData: toolData, //搜索工具栏初始化
      loading: false,
      tableList: [],
      multipleSelection: [],
      listQuery: { start: 0, limit: 10, total: 0, current: 1},
      t_status: ['下架','上架'],
      inhand_count: 0, //正在进行的数量
    }
  },
  methods: {
    onCopy: function() {
      this.$message({
        type: "success",
        message: "复制成功"
      });
    },
    onError: function() {
      this.$message.error("复制失败");
    },
    async delRows(){//批量删除
      if (this.multipleSelection.length == 0) {
        this.$message.warning("请先选择需要调整单元");
        return;
      }
      const ids = this.multipleSelection.map(item => item.id).join();
      try {
        const res = await this.$confirm("确认删除吗？");
        if (res == "confirm") {
          this.loading = true;
          const { data } = await draw_deleteAll({array: ids});
          if (data.status == 100) {
            this.$message.success("删除成功");
          }
          this.initList();
        }
      } catch (error) {
        console.log(error, "error");
      }
    },
    async delRow(row){//删除
      try {
        let res = await this.$confirm('确认删除吗？');
        if(res == 'confirm'){
          this.loading = true ;
          let { data } = await draw_delete(row)
          if(data.status == 100){
            this.$message.success('删除成功')
          }
          this.initList();
          this.loading = false ;
        }
      } catch (error) {
        console.log(error,'error')
      }
    },
    async createForm(){//创建抽奖
      await this.$store.dispatch('ClearDrawFormData');
      await this.$store.dispatch('SetCheckDraw','add');
      this.$router.push('/other/createDraw')
    },
    async editForm(data){//编辑当前行
      await this.$store.dispatch('SetDrawFormData',data);
      await this.$store.dispatch('SetCheckDraw','edit');
      this.$router.push("/other/createDraw")
    },
    listForm(data){//跳转到查看列表页面
      this.$router.push({path: "/other/nameList", query: {id: data.id,active_title:data.active_title}});
    },
    handleSelectionChange(e){//
       this.multipleSelection = e;
    },
    async upAndownPro(e){//1 上架 0下架
      if(this.multipleSelection.length == 0){
        this.$message.warning('请先选择需要调整单元');
        return;
      }
      const ids = this.multipleSelection.map(item => item.id).join();
      this.loading = true;
      let { data } = await draw_updateCloseStatus({ids: ids, close_status: e});
      this.loading = false;
      if(data.status === 100){
        await this.initList();
        this.$message.success(`${this.t_status[e]}成功`);
      }
    },
    async topStatus(e) {  //置顶为1,取消置顶为0
      if (this.multipleSelection.length == 0) {
        this.$message.warning("请先选择需要调整单元");
        return;
      }
      const ids = this.multipleSelection.map(item => item.id).join();
      this.loading = true;
      let { data }  = await draw_updateTopStatus({ ids: ids, top_status: e });
      this.loading = false;
      if (data.status === 100) {
        this.$message.success('操作成功')
        await this.initList();
      }
    },
    search(){//搜索
      let keyWords = {key: 'searchDate', names: ['create_start_time', 'create_end_time']}
      this.listQuery = searchTool(this.listQuery, keyWords);
      this.initList();
    },
    async initList() {
      this.loading = true
      const query = {...this.listQuery, company_id: localStorage.getItem('companyId') - 0};
      const { data } = await draw_list(query);
      this.loading = false
      if(data.status == 100){
        this.tableList = data.data.rows;
        this.listQuery.total = data.data.results;
        this.inhand_count = data.data.inhand_count;
      }
    },
  },
  created() {
    this.initList();
  }
}
</script>
<style lang="scss" scoped>
span{
  font-size: 13px;
  color: #606266;
}
.ali-zhiding{
  color: #009900;
  font-size: 20px;
}
.ali-edit-2{
  cursor: pointer;
  color: #E6A23D;
}
.ali-bin{
  margin-left: 5px;
  cursor: pointer;
  color: #F56C6C;
}
</style>
